/**
 * 栅格布局--响应式布局
 * @author SPY
 * @date 2020/03/27
 */
import React from 'react';
import { Row, Col } from 'antd';
import styles from './GridCommon.less';

const colLayout = { xs: 24, sm: 12, md: 8, lg: 6 }; // 响应式布局--即根据当前像素显示对应的个数

/**
 * xs<576px 响应式栅格
 * 576px<sm<768px 响应式栅格
 * 768px<md<992px 响应式栅格
 * 992px<lg<1200px 响应式栅格
 */

export default () => {
  return (
    // gutter 响应式间距,[水平间距,垂直间距]
    <Row
      gutter={[
        { xs: 8, sm: 16, md: 24, lg: 32 },
        { xs: 4, sm: 8, md: 16, lg: 16 },
      ]}
    >
      <Col {...colLayout}>
        <div className={styles.col_1}>col-6</div>
      </Col>
      <Col {...colLayout}>
        <div className={styles.col_2}>col-6</div>
      </Col>
      <Col {...colLayout}>
        <div className={styles.col_3}>col-6</div>
      </Col>
      <Col {...colLayout}>
        <div className={styles.col_4}>col-6</div>
      </Col>
    </Row>
  );
};
